import React, {Component} from 'react';
import {Text, View, Image, ScrollView} from 'react-native';
import {WingBlank, Flex} from '@ant-design/react-native';
import Video from 'react-native-video';

export default class LoanInfo extends Component {
    static navigationOptions = {
        title: '怎样零首付',
    };

    constructor(props) {
        super(props);
        this.state = {
            paused: this.props.paused || true,
        };
    }

    UNSAFE_componentWillReceiveProps(prevProps) {
        if (prevProps.paused !== this.state.paused) {
            this.setState({paused: prevProps.paused});
        }
    }

    getPlayState = (data) => {
        if (this.props.updateState) {
            this.props.updateState(data.playbackRate < 1);
        }
    };

    render() {
        return (
            <ScrollView style={{flex: 1}}>
                <Flex style={{width: '100%', height: 200}}>
                    <Video
                        style={{width: '100%', height: '100%'}}
                        resizeMode="contain"
                        paused={this.state.paused}
                        onPlaybackRateChange={this.getPlayState}
                        controls
                        source={{uri: 'http://1301076982.vod2.myqcloud.com/a804d64fvodtranscq1301076982/baa055b75285890806762649229/v.f100810.mp4'}}
                    />
                </Flex>
                <View style={{backgroundColor: '#FFFFFF'}}>
                    <WingBlank size={'lg'}>
                        <Text style={{marginTop: '5%', fontSize: 18}}>"怎样0首付"视频讲解</Text>
                        <Flex direction="row" align="center" style={{marginBottom: 10}}>
                            <Flex direction="row" align="center" justify="center" style={{marginTop: 5}}>
                                <Image style={{width: 15, height: 15}} source={require('~/assets/my/time2x.png')} />
                            </Flex>
                            <Flex direction="row" align="center" justify="center" style={{marginLeft: '2%', marginTop: 5}}>
                                <Text style={{color: '#999999'}}>发布时间:2020-08-10</Text>
                            </Flex>
                            <Flex direction="row" align="center" justify="center" style={{marginLeft: '5%', marginTop: 5}}>
                                <Image style={{width: 15, height: 15}} source={require('~/assets/my/bro2x.png')} />
                                <Text style={{color: '#999999', marginLeft: 5}}>5628次播放</Text>
                            </Flex>
                        </Flex>
                    </WingBlank>
                </View>
                <View style={{flexDirection: 'column', backgroundColor: '#FFFFFF', marginTop: 20}}>
                    <WingBlank size={'lg'}>
                        <Flex direction="row" style={{marginTop: 15}}>
                            <Flex
                                style={{
                                    borderWidth: 0.3,
                                    borderColor: 'red',
                                    borderRadius: 40,
                                    width: 20,
                                    height: 20,
                                    justifyContent: 'center',
                                    backgroundColor: 'red',
                                }}>
                                <Text style={{color: '#FFFFFF'}}>1</Text>
                            </Flex>
                            <Text style={{fontSize: 18, marginLeft: 10}}>什么是零首付买车位？</Text>
                        </Flex>
                        <Text style={{marginTop: 10, color: '#999999'}}>零首付买车位，就是业主不用花自己的钱，就可以买下心仪的车位。</Text>
                    </WingBlank>
                    <WingBlank size={'lg'}>
                        <View style={{width: '100%', height: 2, backgroundColor: '#F6F6F6', marginTop: 10}} />
                        <Flex direction="row" style={{marginTop: 15}}>
                            <Flex
                                style={{
                                    borderWidth: 0.3,
                                    borderColor: 'red',
                                    borderRadius: 40,
                                    width: 20,
                                    height: 20,
                                    justifyContent: 'center',
                                    backgroundColor: 'red',
                                }}>
                                <Text style={{color: '#FFFFFF'}}>2</Text>
                            </Flex>
                            <Text style={{fontSize: 18, marginLeft: 10}}>买车位的钱哪里来？</Text>
                        </Flex>
                        <Text style={{marginTop: 10, color: '#999999'}}>从银行来。由业主向银行申请信用贷款，银行先行为业主支付车位款。</Text>
                    </WingBlank>
                    <WingBlank size={'lg'}>
                        <View style={{width: '100%', height: 2, backgroundColor: '#F6F6F6', marginTop: 10}} />
                        <Flex direction="row" style={{marginTop: 15}}>
                            <Flex
                                style={{
                                    borderWidth: 0.3,
                                    borderColor: 'red',
                                    borderRadius: 40,
                                    width: 20,
                                    height: 20,
                                    justifyContent: 'center',
                                    backgroundColor: 'red',
                                }}>
                                <Text style={{color: '#FFFFFF'}}>3</Text>
                            </Flex>
                            <Text style={{fontSize: 18, marginLeft: 10}}>3.贷款需要还吗？</Text>
                        </Flex>
                        <Text style={{marginTop: 10, color: '#999999', marginBottom: 20}}>
                            因为返现金，帮助业主化解了还贷款的压力。实际上业主是不用自己掏钱还贷款的。
                        </Text>
                    </WingBlank>
                </View>
            </ScrollView>
        );
    }
}
